<template>
    <el-upload
            :action="uploadUrl"
            :multiple="multiple"
            :limit="limit"
            :on-remove="onRemove"
            :on-success="onSuccess">
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
</template>

<script>
    import store from "@/store";

    export default {
        name: "fileUpload",
        data(){
            return {
                uploadFileList: [],
            };
        },
        model: {
            prop: 'fileList',
            event: 'change'
        },
        props:{
            limit:{
                type: Number,
                default: 3
            },
            fileList:{
                type: Array
            },
            fileType:{
                type: String,
                default: '2'
            }
        },
        computed:{
            uploadUrl(){
                return '/planning/file/upload?access_token=' + store.getters.access_token + '&fileType=' + this.fileType
            },
            multiple(){
                return this.limit > 1;
            }
        },
        watch:{
            uploadFileList(){
                this.$emit('change', this.uploadFileList);
            }
        },
        created() {

        },
        methods:{
            onSuccess(response, file, fileList) {
                let fileId = response.data;
                this.uploadFileList.push(Object.assign(file,{fileId: fileId}));
            },
            onRemove(file, fileList){
                let index = 0;
                for(let uploadFile of this.uploadFileList){
                    if (uploadFile.uid == file.uid) {
                        break;
                    }
                    index++;
                }
                if(index < this.uploadFileList.length){
                    this.uploadFileList.splice(index, 1);
                }
            }
        }
    }
</script>

<style scoped>

</style>